<section>
  <div class="btn-group">
    <d-button
      bsStyle="common"
      dPopover
      [popType]="'default'"
      [content]="'default!'"
      [position]="'left'"
      [controlled]="true"
      [appendToBody]="false"
    >
      default
    </d-button>
    <d-button
      dPopover
      bsStyle="common"
      [popType]="'info'"
      [content]="'info!'"
      [position]="['top', 'right', 'bottom', 'left']"
      [controlled]="true"
      [appendToBody]="false"
    >
      info
    </d-button>
    <d-button
      dPopover
      bsStyle="common"
      [content]="'error!'"
      [popType]="'error'"
      [position]="'top'"
      [controlled]="true"
      [appendToBody]="false"
    >
      error
    </d-button>
    <d-button
      dPopover
      bsStyle="common"
      [content]="'warning!'"
      [popType]="'warning'"
      [position]="'bottom'"
      [controlled]="true"
      [appendToBody]="false"
    >
      warning
    </d-button>
    <d-button
      dPopover
      bsStyle="common"
      [popType]="'success'"
      [content]="'success!'"
      [position]="['bottom', 'right', 'top', 'left']"
      [controlled]="true"
      [appendToBody]="true"
    >
      success
    </d-button>
    <d-button dPopover bsStyle="common" [content]="'No Animation!'" [controlled]="true" [showAnimation]="false"> No Animation </d-button>
  </div>
</section>
